<template>
    <el-dialog v-model="isOpen" title="集中趋势分析结果" :border="true" align-center>
        <el-descriptions column="1" border>
            <el-descriptions-item label="均值">{{ result.mean }}</el-descriptions-item>
            <el-descriptions-item label="中位数">{{ result.median }}</el-descriptions-item>
            <el-descriptions-item label="众数">
                <span v-for="(num, index) in result.mode" :key="index">
                    {{ num }}{{ index < result.mode.length - 1 ? ", " : "" }}
                </span>
            </el-descriptions-item>
        </el-descriptions>

        <el-divider />

        <div ref="chartContainer" style="width: 100%;height: 400px" />

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="isOpen = false">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { nextTick, ref, watch } from "vue"
import * as echarts             from "echarts"

let isOpen = defineModel()
let props  = defineProps([ "originalData", "result" ])

let chartContainer = ref(null)
let chartInstance  = ref(null)

watch(isOpen, (val) => {
    if(val){
        initChart()
    }
})

function initChart(){
    nextTick(() => {
        if(!chartContainer.value){
            return
        }
        if(!props.originalData){
            return
        }
        if(!props.result){
            return
        }

        if(!chartInstance.value){
            chartInstance.value = echarts.init(chartContainer.value)
        }

        const sortedData = [ ...props.originalData ].sort((a, b) => a - b)
        const dataPoints = sortedData.map(value => ({
            value    : [ value, 1 ],
            itemStyle: {
                color: props.result.mode.includes(value) ? "#2c3e50" : "#95a5a6",
            },
        }))

        const option = {
            tooltip   : {
                trigger  : "item",
                formatter: params => `数值: ${ params.value[0] }`,
            },
            grid      : {
                left        : "10%",
                right       : "10%",
                bottom      : "20%",
                top         : "10%",
                containLabel: true,
            },
            xAxis     : {
                type: "value",
                name: "数值",
                min : Math.min(...sortedData) - 1,
                max : Math.max(...sortedData) + 1,
            },
            yAxis     : {
                type: "value",
                show: false,
                min : 0.5,
                max : 1.5,
            },
            series    : [
                {
                    type      : "scatter",
                    symbolSize: 12,
                    data      : dataPoints,
                    z         : 3,
                    label     : {
                        show     : true,
                        position : "top",
                        formatter: params => params.value[0],
                    },
                },
                {
                    type     : "line",
                    name     : "meanLine",
                    data     : [
                        [ props.result.mean, 0.5 ],
                        [ props.result.mean, 1.5 ],
                    ],
                    lineStyle: {
                        color: "#e74c3c",
                        type : "dashed",
                        width: 2,
                    },
                    symbol   : "none",
                    z        : 1,
                },
                {
                    type     : "line",
                    name     : "medianLine",
                    data     : [
                        [ props.result.median, 0.5 ],
                        [ props.result.median, 1.5 ],
                    ],
                    lineStyle: {
                        color: "#3498db",
                        width: 2,
                    },
                    symbol   : "none",
                    z        : 2,
                },
            ],
            annotation: {
                label    : {
                    fontSize: 12,
                    color   : "#333",
                },
                itemStyle: {
                    color: "transparent",
                },
                data     : [
                    {
                        name            : "meanLabel",
                        type            : "text",
                        coordinateSystem: "xAxis",
                        value           : `均值: ${ props.result.mean }`,
                        x               : props.result.mean,
                        y               : "bottom",
                        offset          : [ 0, 10 ],
                        align           : "center",
                    },
                    {
                        name            : "medianLabel",
                        type            : "text",
                        coordinateSystem: "xAxis",
                        value           : `中位数: ${ props.result.median }`,
                        x               : props.result.median,
                        y               : "bottom",
                        offset          : [ 0, 30 ],
                        align           : "center",
                    },
                ],
            },
        }

        chartInstance.value.setOption(option)

        window.onresize = function(){
            chartInstance.value.resize()
        }
    })
}
</script>

<style lang="scss" scoped>
</style>

